<template>
  <div class="main-body-pos">
    <el-form ref="form" :model="form" :inline="true" class="form-body">
      <el-form-item label="定位计划名称">
        <el-input v-model="planName" size="small" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" @click="searchMethod" size="small" icon="el-icon-search">查询</el-button>
        <el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
        <el-button type="primary" @click="newPlan" size="small" icon="el-icon-plus">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="table-body" ref="tableRef">
      <el-table
        :data="caseList"
        style="width: 100%;overflow: auto;padding: 0;"
        :max-height="tableHe-80"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        :header-row-style="tableHeaderColor"
        :header-cell-style="{padding:'0px',background:'#E1F1FF'}"
      >
        <div slot="empty" class="empty">
          <span>暂无数据</span>
        </div>
        <af-table-column
          v-for="(item,index) in labelList"
          :key="index"
          :render-header="labelHead"
          show-overflow-tooltip
          :label="item.label"
          :prop="item.prop"
        ></af-table-column>
        <el-table-column label="操作" width="250" align="center" v-if="labelList.length>0">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editorRow(scope.row)">修改计划信息</el-button>
            <el-button type="text" size="small" @click="editorPerson(scope.row)">修改人员信息</el-button>
            <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="block"
        style="margin-top: 24px;position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);"
      >
        <el-pagination
          @size-change="sizeClick"
          @current-change="pageClick"
          :current-page="pageNum"
          :page-sizes="[10,20,30,40,50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div>
    <PositioningSetStep v-show="newPlanFlag" :newPlanFlag="newPlanFlag" @emClosePop="emClosePop"></PositioningSetStep>
    <PositionUpdatePlan
      v-show="updatePlan"
      :updatePlan="updatePlan"
      :planInfo="updatePlanObject"
      @emClosePop="emClosePop"
    ></PositionUpdatePlan>
    <PositionUpdatePer
      v-show="updatePerson"
      :updatePerson="updatePerson"
      :updatePersonPlanId="updatePersonPlanId"
      @emClosePop="emClosePop"
    ></PositionUpdatePer>
  </div>
</template>

<script>
import PositioningSetStep from 'components/configServers/PositioningSet/PositioningSetStep';
import PositionUpdatePlan from 'components/configServers/PositioningSet/PositionUpdatePlan';
import PositionUpdatePer from 'components/configServers/PositioningSet/PositionUpdatePer.vue';
import { dateFormat, chgStrToDate } from '@/base/utils.js'

export default {
  components: { PositioningSetStep, PositionUpdatePlan, PositionUpdatePer },
  data () {
    return {
      form: '',
      planName: '',
      labelList: [
        {
          prop: 'planName',
          label: '计划名称'
        },
        {
          prop: 'starAndEndDate',
          label: '定位起止日期'
        },
        {
          prop: 'dayTimeSlot',
          label: '日定位时间段'
        },
        {
          prop: 'modifyDate',
          label: '最新操作时间'
        },
        {
          prop: 'modifyOperatorName',
          label: '操作人'
        }
      ],
      caseList: [],
      pageNum: '1',
      pageSize: '10',
      totalCount: 50,
      showPagination: true,//只有一页时隐藏分页
      tableHe: 1000,
      newPlanFlag: false,
      updatePlan: false,
      updatePlanObject: {},
      updatePerson: false,
      updatePersonPlanId: ''
    }
  },
  computed: {},
  methods: {
    labelHead (h, { column, index }) {
      let l = column.label.length;
      let f = 15; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
      column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
      //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
      return h('div', { class: 'table-head', style: { width: '100%' } }, [column.label]);
    },
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'color: #4389D6;height: 40px;'
      }
    },
    searchMethod () {
      this.selectPlanList();
    },
    reset () {
      this.pageNum = '1';
      this.pageSize = '10';
      this.planName = '';
      this.selectPlanList();
    },
    newPlan () {
      this.newPlanFlag = true;
    },
    pageClick (val) {
      this.pageNum = val;
      this.selectPlanList();
    },
    sizeClick (val) {
      this.pageSize = val;
      this.selectPlanList();
    },
    editorRow (item) {
      this.updatePlan = true;
      this.updatePlanObject = item;
    },
    editorPerson (item) {
      this.updatePerson = true;
      this.updatePersonPlanId = item.planId
    },
    deleteRow (item) {
      let param = {
        planId: item.planId,
        state: '0'
      }
      // 
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/lbs/locatepeople/locatePlan/deleteLocatePlan', param).then(res => {
          if (res.data.retCode == '0') {
            this.$message({
              message: res.data.retMsg,
              type: 'success'
            });
            this.selectPlanList();
          } else {
            this.$message({
              message: res.data.retMsg,
              type: 'error'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    emClosePop () {
      this.newPlanFlag = false;
      this.updatePlan = false;
      this.updatePerson = false;
      this.selectPlanList();
    },
    selectPlanList () {
      let param = {
        "planName": this.planName,
        "pageNum": this.pageNum,
        "pageSize": this.pageSize
      }
      this.$http.post('/lbs/locatepeople/locatePlan/qryLocatePlanList', param).then(res => {
        if (res.data.retCode == '0') {
          this.caseList = res.data.pageData;
          this.totalCount = parseInt(res.data.total);
          this.caseList.forEach(item => {
            item.starAndEndDate = dateFormat(chgStrToDate(item.startDate), 'yyyy/MM/dd') + '-' + dateFormat(chgStrToDate(item.endDate), 'yyyy/MM/dd');
            item.dayTimeSlot = item.startTime + '-' + item.endTime;
            item.modifyDate = dateFormat(new Date(item.modifyDate), 'yyyy/MM/dd hh:mm:ss');
          })
        } else {
          this.$message({
            message: res.data.retMsg,
            type: 'error'
          });
        }
      })
    },
  },
  mounted () {
    let obj = this.$refs.tableRef;
    this.tableHe = parseInt(window.getComputedStyle(obj).height);
    this.selectPlanList();
  }
}
</script>

<style scoped lang="less">
.main-body-pos {
  width: 1200px;
  height: 100%;
}
.table-body {
  margin-top: 61px;
  background: #fff;
  padding: 16px;
  position: absolute;
  width: 1200px;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border-bottom-right-radius: 15px;
}
.form-body {
  padding: 10px 20px;
  background: #fbfbfb;
  height: 40px;
  border-bottom: 1px solid #e1e1e1;
  border-top-right-radius: 15px;
}
</style>
<style lang="less">
.main-body-pos {
  .el-button--text {
    padding: 5px 0;
  }
}
</style>
